import React from 'react'
import ReactDOM from 'react-dom'
import CSSTransition from 'react-transition-group/CSSTransition'
import style from './style.module.scss'
import { CloseOutlined } from '@ant-design/icons'

interface ILeoModalProps {
    title: string
    children: React.ReactNode
}

function createContainer(props: ILeoModalProps) {
    const container = document.createElement('div')
    container.className = style.leo__modal
    document.body.appendChild(container)
    ReactDOM.render(<LeoModal {...props} />, container)
    return {
        destory() {
            ReactDOM.unmountComponentAtNode(container)
            document.body.removeChild(container)
        }
    }
}

let container: any

export default class LeoModal extends React.Component<ILeoModalProps, any> {
    state = {
        isShow: false
    }

    constructor(props: ILeoModalProps) {
        super(props)
    }

    componentDidMount() {
        this.setState({
            isShow: true
        })
    }

    render() {
        return (
            <CSSTransition timeout={300} unmountOnExit in={this.state.isShow} classNames="modal">
                <div className={style.modal__wrap} onClick={e => e.stopPropagation()}>
                    <div className={style.header}>
                        <span className={style.title}>{this.props.title}</span>
                        <div className={style.btn} onClick={() => container.destory()}>
                            <CloseOutlined />
                        </div>
                    </div>
                    <div className={style.container}>{this.props.children}</div>
                </div>
            </CSSTransition>
        )
    }

    public static show(props: ILeoModalProps) {
        container = createContainer(props)
    }
}
